<template>
    <div @click="showMessage" class="message-con">
        <Tooltip placement="bottom">
            <Badge :count="items.length" overflow-count="99" class-name="small-count">
                <Icon type="ios-bell" :size="22"></Icon>
            </Badge>
            <div slot="content">
                <div style="height: 300px;width: 300px;background-color: white;overflow: auto">
                    <div class="item-box" v-for="(item,index) in items">
                        <div class="header-box">
                            <div style="font-weight: bold;line-height: 26px;font-size: 13px;color: black">
                                {{JSON.parse(item).tagType === 'ADVISE'?'意见建议':JSON.parse(item).tagType ===
                                'EVENT'?'事件上报':JSON.parse(item).tagType ===
                                'FLOW'?'政务待办':'入驻审核'}}
                                <!--{{JSON.parse(item).tagType}}-->
                            </div>
                            <div @click="goToHandle(JSON.parse(item),index)" style="color: #0396FF">前去处理</div>
                        </div>
                        <div v-if="JSON.parse(item).tagType === 'FLOW'">
                            <div class="tip-title">发起人：{{JSON.parse(item).title}}</div>
                            <div class="tip-title">业务类型：{{JSON.parse(item).content}}</div>
                        </div>
                        <div v-else-if="JSON.parse(item).tagType === 'ROOM'">
                            <div class="tip-title">申请人：{{JSON.parse(item).title}}</div>
                            <div class="tip-title">申请信息：{{JSON.parse(item).content}}</div>
                        </div>
                        <div v-else>
                            <div class="tip-title">标题：{{JSON.parse(item).title}}</div>
                            <div class="tip-title">内容：{{JSON.parse(item).content}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </Tooltip>
    </div>
</template>

<script>
    import util from '@/libs/util.js';

    export default {
        name: 'messageTip',
        data() {
            return {
                // items: JSON.parse(window.$localStorage.getItem('notice'))
            }
        },
        props: {
            items: {
                type: Array,
                default: []
            }
        },
        // watch: {
        //     'items': {
        //         handler: function (n, o) {
        //             console.log('============')
        //         },
        //         deep: true
        //     }
        // },
        methods: {
            showMessage() {
                // util.openNewPage(this, 'message_index');
                // this.$router.push({
                //     name: 'message_index'
                // });
            },
            goToHandle(item, index) {
                if (item.tagType === 'ADVISE') {
                    this.$router.push({
                        name: 'suggestion'
                    });
                } else if (item.tagType === 'EVENT') {
                    this.$router.push({
                        name: 'report'
                    });
                } else if (item.tagType === 'FLOW'){
                    this.$router.push({
                        name: 'my-pending'
                    });
                } else {
                    this.$router.push({
                        name: 'userapplication'
                    });
                }
                this.items.splice(index, 1);
                window.$localStorage.setItem('notice', JSON.stringify(this.items));
                // this.items = JSON.parse(window.$localStorage.getItem('notice'));
            }
        },
        mounted() {
        }
    };
</script>
<style scoped>
    .item-box {
        width: 100%;
        height: 80px;
        padding: 5px 10px;
        background: #F6F6F6;
        margin-bottom: 4px;
        border-radius: 4px;
    }

    .header-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .tip-title {
        color: black;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 21px;
    }

    /deep/ .small-count {
        font-size: 10px;
        height: 16px;
        line-height: 14px;
        padding: 0 4px;
    }

    /deep/ .ivu-tooltip-inner {
        max-width: 324px;
        background-color: white;
    }

    /deep/ .ivu-tooltip-popper {
        border-bottom-color: white;
    }
</style>
